
$(function (){
    $('#FISH').mouseenter(function (){
        var categoryId=document.getElementById('FISH');
        console.log(keyword);
        $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/mypetstore/informationAuto?categoryId=' + categoryId,
            success: function (data) {
                console.log(data);
                var productListHTML = '';
                for (var i = 0; i < data.length; i++) {
                    productListHTML += '<li class=\"productItem\" data-productId="';
                    productListHTML += data[i].productId;
                    productListHTML += '">';
                    productListHTML += data[i].categoryId;
                    productListHTML += ': ';
                    productListHTML += data[i].name;
                    productListHTML += '</li>';
                }
                $('#productfish').html(productListHTML);
                $('#detail_fish').show();
                $('li').hide().each(function (index){
                   $(this).delay(200*index).fadeIn(800);
                });
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    });

    $('#FISH').mouseleave(function (){
        $('#detail_fish').hide();
    });

    $('#DOGS').mouseenter(function (){
        var categoryId=document.getElementById('DOGS');
        console.log(keyword);
        $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/mypetstore/informationAuto?categoryId=' + categoryId,
            success: function (data) {
                console.log(data);
                var productListHTML = '';
                for (var i = 0; i < data.length; i++) {
                    productListHTML += '<li class=\"productItem2\" data-productId="';
                    productListHTML += data[i].productId;
                    productListHTML += '">';
                    productListHTML += data[i].categoryId;
                    productListHTML += ': ';
                    productListHTML += data[i].name;
                    productListHTML += '</li>';
                }
                $('#productdogs').html(productListHTML);
                $('#detail_dogs').show();
                $('li').hide().each(function (index){
                    $(this).delay(200*index).fadeIn(800);
                });
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    });

    $('#DOGS').mouseleave(function (){
        $('#detail_dogs').hide();
    });



    $('#REPTILES').mouseenter(function (){
        var categoryId=document.getElementById('REPTILES');
        console.log(keyword);
        $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/mypetstore/informationAuto?categoryId=' + categoryId,
            success: function (data) {
                console.log(data);
                var productListHTML = '';
                for (var i = 0; i < data.length; i++) {
                    productListHTML += '<li class=\"productItem3\" data-productId="';
                    productListHTML += data[i].productId;
                    productListHTML += '">';
                    productListHTML += data[i].categoryId;
                    productListHTML += ': ';
                    productListHTML += data[i].name;
                    productListHTML += '</li>';
                }
                $('#productreptiles').html(productListHTML);
                $('#detail_reptiles').show();
                $('li').hide().each(function (index){
                    $(this).delay(200*index).fadeIn(800);
                });
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    });

    $('#REPTILES').mouseleave(function (){
        $('#detail_reptiles').hide();
    });



    $('#CATS').mouseenter(function (){
        var categoryId=document.getElementById('CATS');
        console.log(keyword);
        $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/mypetstore/informationAuto?categoryId=' + categoryId,
            success: function (data) {
                console.log(data);
                var productListHTML = '';
                for (var i = 0; i < data.length; i++) {
                    productListHTML += '<li class=\"productItem4\" data-productId="';
                    productListHTML += data[i].productId;
                    productListHTML += '">';
                    productListHTML += data[i].categoryId;
                    productListHTML += ': ';
                    productListHTML += data[i].name;
                    productListHTML += '</li>';
                }
                $('#productcats').html(productListHTML);
                $('#detail_cats').show();
                $('li').hide().each(function (index){
                    $(this).delay(200*index).fadeIn(800);
                });
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    });

    $('#CATS').mouseleave(function (){
        $('#detail_cats').hide();
    });



    $('#BIRDS').mouseenter(function (){
        var categoryId=document.getElementById('BIRDS');
        console.log(keyword);
        $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/mypetstore/informationAuto?categoryId=' + categoryId,
            success: function (data) {
                console.log(data);
                var productListHTML = '';
                for (var i = 0; i < data.length; i++) {
                    productListHTML += '<li class=\"productItem5\" data-productId="';
                    productListHTML += data[i].productId;
                    productListHTML += '">';
                    productListHTML += data[i].categoryId;
                    productListHTML += ': ';
                    productListHTML += data[i].name;
                    productListHTML += '</li>';
                }
                $('#productbirds').html(productListHTML);
                $('#detail_birds').show();
                $('li').hide().each(function (index){
                    $(this).delay(200*index).fadeIn(800);
                });
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    });

    $('#BIRDS').mouseleave(function (){
        $('#detail_birds').hide();
    });



    $('#BIRDS_img').mouseenter(function (){
        var categoryId=document.getElementById('BIRDS');
        console.log(keyword);
        $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/mypetstore/informationAuto?categoryId=' + categoryId,
            success: function (data) {
                console.log(data);
                var productListHTML = '';
                for (var i = 0; i < data.length; i++) {
                    productListHTML += '<li class=\"productItem6\" data-productId="';
                    productListHTML += data[i].productId;
                    productListHTML += '">';
                    productListHTML += data[i].categoryId;
                    productListHTML += ': ';
                    productListHTML += data[i].name;
                    productListHTML += '</li>';
                }
                $('#productbirds_copy').html(productListHTML);
                $('#detail_birds_copy').show();
                $('li').hide().each(function (index){
                    $(this).delay(200*index).fadeIn(800);
                });
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    });

    $('#BIRDS_img').mouseleave(function (){
        $('#detail_birds_copy').hide();
    });


});